<template>
  <el-form ref="formRef" :model="form" v-loading="loading">
    <pub-edit-description :ndColumns="2">
      <pub-edit-description-item :span="2" label="上级机构">
        {{ form.orgPidName }}
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="机构名称" required>
        <el-form-item prop="orgName" :rules="$formRules.input">
          <pub-input v-model="form.orgName"></pub-input>
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="统一信用代码">
        <el-form-item>
          <pub-input v-model="form.creditCode"></pub-input>
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="2" label="机构类型" required>
        <el-form-item prop="orgType" :rules="$formRules.select">
          <!-- <pub-input v-model="form.orgSubtype"></pub-input> -->
          <el-cascader
            style="width: 100%"
            :options="allOrgType"
            v-model="form.comOrgType"
            :props="orgTypeProps"
            @change="orgTypeChange"
          />
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="2" label="所在地区" required>
        
        <el-form-item :prop="renderAreaProp" :rules="$formRules.select">
          
          <area-cascader-new
            v-model:formValue="form"
            width="100%"
            :disabledLevel="form.cascaderDisabledLevel"
            :maxLevel="form.cascaderMaxLevel"
          />
        </el-form-item>
      </pub-edit-description-item>

      <pub-edit-description-item :span="2" label="经纬度">
        <div class="w-full h-360px">
          <positionSelect v-model:formValue="form" />
        </div>
      </pub-edit-description-item>
      <pub-edit-description-item :span="2" label="备注">
        <el-form-item prop="remark">
          <pub-textarea v-model="form.remark" />
        </el-form-item>
      </pub-edit-description-item>
    </pub-edit-description>
  </el-form>

  <div class="dialog-footer-btn">
    <el-button type="default" @click="emit('cancel')">取消</el-button>
    <el-button type="primary" @click="submit" v-prevent-repeat-click>保存</el-button>
  </div>
</template>
<script setup>
import { ElLoading } from 'element-plus'
import {
  get_org_detail,
  add_org,
  get_org_type_tree,
  edit_org
} from '@/api/system'
import { formatDictCode } from '@/utils/index'
const emit = defineEmits(['cancel', 'success'])
const props = defineProps({
  dialogId: {
    type: String,
    default: ''
  },
  dialogType: {
    type: String,
    default: ''
  }
})
const loading = ref(false)
const form = ref({})
const formRef = ref(null)
const submit = async () => {
  console.log(form.value)
  formRef.value.validate(async valid => {
    if (valid) {
      loading.value = true
      console.log(form.value)
      let res =
        props.dialogType === 'add'
          ? await add_org(form.value)
          : await edit_org(form.value)
      if (res.succeed) {
        emit(
          'success',
          props.dialogType === 'add' ? props.dialogId : form.value.orgPid
        )
      }
      loading.value = false
    }
  })
}
const getDetail = async () => {
  let { data } = await get_org_detail(props.dialogId)
  if (props.dialogType === 'add') {
    form.value.orgPid = data.id
    form.value.orgPidName = data.orgName
    form.value.provinceCode = data.provinceCode
    form.value.cityCode = data.cityCode
    form.value.countyCode = data.countyCode
    form.value.streetCode = data.streetCode
    form.value.communityCode = data.communityCode
    form.value.provinceName = data.provinceName
    form.value.cityName = data.cityName
    form.value.countyName = data.countyName
    form.value.streetName = data.streetName
    form.value.communityName = data.communityName
    form.value.cascaderMaxLevel = data.level
    form.value.cascaderDisabledLevel = data.level-1
  } else {
    console.log('***',data);
    
    form.value = data
    form.value.comOrgType = form.value.orgSubtype
      ? [form.value.orgType, form.value.orgSubtype]
      : [form.value.orgType]
      form.value.cascaderMaxLevel = data.level-1
    form.value.cascaderDisabledLevel = data.level - 2
  }
}
const allOrgType = ref([])
const getAllOrgType = async () => {
  let { data } = await get_org_type_tree('')
  allOrgType.value = data
}
const orgTypeProps = {
  checkStrictly: true,
  label: 'name',
  value: 'code'
}
const orgTypeChange = val => {
  form.value.orgType = val[0]
  form.value.orgSubtype = val[1]
}
const renderAreaProp = computed(() => {
  if (form.value.pLevel == 0) {
    return 'cityCode'
  } else if (form.value.pLevel == 1) {
    return 'countyCode'
  } else if (form.value.pLevel == 2) {
    return 'streetCode'
  } else if (form.value.pLevel == 3) {
    return 'communityCode'
  }
  return 'provinceCode'
})
onMounted(() => {
  getAllOrgType()
  if (props.dialogId) {
    getDetail()
  }
})
</script>
<style lang="scss" scoped></style>
